@import 'commons.less';

tui\:button {
	.btn();
	margin:2px;
	cursor:pointer;
	//font-weight: bold;
	.border-radius(@buttonBorderRadius);
	text-decoration: none;
	color: @textColor;
	//color:#616161;
  border: 1px solid @borderColor;
	-webkit-tap-highlight-color: inherit;
	-webkit-touch-callout: none;
	outline: none;
	.btn-color(@windowColor, @panelColor - #111, @borderColor, @borderColor);
	&.tui-menu:after {
		.icon-base();
		font-size:@fontSize;
		margin-left:6px;
		.fa-caret-down;
	}
	&:hover {
		color: @textColor;
	}
	&:active {
		.inset-shadow();
	}

	&.tui-dropdown {
		min-width:10px;
		padding-left:5px;
		padding-right:5px;
		&:before {
			content: "";
		}
		&:after {
			.icon-base();
			.fa-caret-down();
			margin-left:0px;
		}
	}

	&.tui-success {
		color: #fff;
		.btn-color(#46a5a5, #009688);
		font-weight: bold;
	}
	&.tui-primary {
		color: #fff;
		.btn-color(#039be5, #0277bd);
		font-weight: bold;
	}
	&.tui-danger {
		color: #fff;
		.btn-color(#f55c73, #c41411);
		font-weight: bold;
	}
	&.tui-warning {
		color: #fff;
		.btn-color(#ff9800, #ef6c00);
		font-weight: bold;
	}

	&.tui-checked {
		color: @textColor + #333;
		.btn-color(@panelColor - #111, @panelColor - #222);
        .inset-shadow();
	}

	&.tui-disable {
		cursor:default;
		.btn-color(@panelColor, @panelColor, @borderColor, @borderColor);
		color: @panelColor - #333;
		&:active {
			box-shadow: none;
		}
	}

	&.tui-flat {
		border-color: transparent;
		margin:2px 0px;
		box-shadow: none;
		font-weight: bold;
		.flat-btn-color(#616161, #000);
		&.tui-success {
			.flat-btn-color(#25a584, #057f70);
		}
		&.tui-primary {
			.flat-btn-color(#0288d1, #01579b);
		}
		&.tui-danger {
			.flat-btn-color(#d01716, #b0120a);
		}
		&.tui-warning {
			.flat-btn-color(#f57c00, #e65100);
		}
		&.tui-checked {
			border-color: transparent;
		}
	}
}


tui\:check,tui\:radio {
	.btn();
	color: @textColor - #111;
	padding: 0 6px;
	text-align:center;
	margin:2px;
	cursor:pointer;
	text-decoration: none;
	.border-radius(@buttonBorderRadius);

	vertical-align:middle;

	&.tui-notify {
		color:red;
		&:hover {
			color:red;
		}
	}
	&:focus {
		outline: 1px dashed #bbb;
	}
	&.tui-disable {
		cursor:default;
		color: @panelColor - #333;
		outline: none;;
		&:hover {
			color: @panelColor - #333;
		}
	}
}

@buttonIconWidth: 22px;
@buttonIconFontSize: 20px;

tui\:check {
	&:before {
		display:inline-block;
		.icon();
		.fa-square-o();
		text-align:left;
		color: @uncheckColor;
		width: @buttonIconWidth;
		vertical-align: middle;
		font-size: @buttonIconFontSize;
	}
	&.tui-checked:before {
		display:inline-block;
		.icon();
		.fa-check-square();
		text-align:left;
		color: @checkedColor;
		width: @buttonIconWidth;
		font-size: @buttonIconFontSize;
	}
	&.tui-tristate:before {
		display:inline-block;
		.icon();
		.fa-check-square();
		text-align:left;
		color: @uncheckColor;
		width: @buttonIconWidth;
		font-size: @buttonIconFontSize;
	}
	&:hover {
		color:inherit;
	}
}

tui\:radio {
	&:before {
		display:inline-block;
		.icon();
		.fa-circle-thin();
		text-align:left;
		color: @uncheckColor;
		width: @buttonIconWidth;
		vertical-align: middle;
		font-size: @buttonIconFontSize;
	}
	&.tui-checked:before {
		display:inline-block;
		.icon();
		.fa-dot-circle-o();
		text-align:left;
		color: @checkedColor;
		width: @buttonIconWidth;
		font-size: @buttonIconFontSize;
	}
	&:hover {
		color:inherit;
	}
}

tui\:check,tui\:radio {
	&.tui-disable:before {
		color: @panelColor - #333;
	}
}

tui\:label {
	.btn();
	margin:2px;
	cursor:default;
	.border-radius(@buttonBorderRadius);
	text-decoration: none;
	color: @textColor;
  border: 1px solid @borderColor;
	-webkit-tap-highlight-color: inherit;
	-webkit-touch-callout: none;
	outline: none;
}

tui\:button.tui-big-icon {
	padding:0 10px;
	i {
		font-size:22px;
		vertical-align:middle;
	}
}
